<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气案例_深度监测</title>
  <script src="../js/vue.js"></script>
</head>


<!-- 
  vue默认不开启深度监视为了效率
 -->

<body>

  <div id="root">
    <h1>今天的天气:{{info}}</h1>
    <button @click="isHot = !isHot">切换</button>
    <h1>{{number.a}}</h1>
    <button @click="number.a++">点我加一</button>
  </div>

  <script type="text/javascript">
    // 阻止vue启动的时候产生生产提示
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: '#root',
      data: {
        isHot: true,
        number: {
          a: 1,
          b: 2
        }
      },
      computed: {
        info() {
          return this.isHot ? '炎热' : '凉爽'
        },
      },
      watch: {
        isHot: {
          // 初始化时执行一次
          immediate: true,
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          }
        },
        // 监听对象中的属性
        "number.a": {
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          }
        },
        // 监听对象
        "number": {
          // 深度监测会检测对象中的属性,如果不加则只会监听整个对象改变
          deep: true,
          handler(newVal, oldVal) {
            console.log(newVal, oldVal)
          }
        }
      }
    })

  </script>

</body>

</html>